<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <h1>The Jquery Ajax 01 Page</h1>
        <button onclick="doAjax()">$.ajax(...)</button>
        <button onclick="doGet()">$.get(...)</button>
        <button onclick="doPost()">$.post(...)</button>
        <button onclick="doLoad()">$(...).load("...")</button>
        <button onclick="doPut()">$(...).put("...")</button>
        <button onclick="doDelete()">$(...).delete("...")</button>
    </div>
    <div id="result">

    </div>
<script src="js/jquery.min.js"></script>
<script>
    function  doDelete(){
        let requestUrl="/doAjaxDelete";
        //let requestUrl="/doAjaxDelete/100";
        let params="101";
        $.ajax({
            //url:requestUrl,//key必须是url
            url:requestUrl+"/"+params,
            type:"delete",//可以省略,默认为get请求
            dataType:"text",//服务端响应到客户端的数据格式,默认为json
            success:function (result){//callback 回调函数
                $("#result").html(result);//Jquery中的封装简化写法
            }
        });
    }

    function  doPut(){
        let requestUrl="/doAjaxPut";
        let params="id=100&city=huan";
        $.ajax({
            url:requestUrl,//key必须是url
            data:params,
            type:"put",//可以省略,默认为get请求
            dataType:"text",//服务端响应到客户端的数据格式,默认为json
            success:function (result){//callback 回调函数
                $("#result").html(result);//Jquery中的封装简化写法
            }
        });
    }

    function doLoad(){
        let requestUrl="/doAjaxGet";
        //load函数会在指定位置通过ajax方法加载数据,并将数据更新到这个位置
        $("#result").load(requestUrl,function(){//可选
            console.log("==load complete==");//加载完成以后执行
        });
    }
    function doPost(){
        let requestUrl="/doAjaxPost";
        let params="id=104&city=shijiazhuang";
        $.post(requestUrl,params,function(result){
           // alert(result);
            $("#result").html(JSON.stringify(result));
        })
    }
    function  doGet() {
        let requestUrl = "/doAjaxGet";
        let params = "";
        $.get(requestUrl,params,function (result) {
               // $("#result").html(JSON.stringify(result));
            $("#result").html(result);
            },"text");//默认为json
    }
    function  doAjax(){
        let requestUrl="/doAjaxGet";
        let params="";
        //$符号在这里代表jquery对象
        // $.ajax({})为jquery中的一个ajax函数,底层封装了ajax请求过程
        $.ajax({
            url:requestUrl,//key必须是url
            data:params,
            type:"GET",//可以省略,默认为get请求
            dataType:"text",//服务端响应到客户端的数据格式,默认为json
            success:function (result){//callback 回调函数
               // console.log("result",result);
               //document.querySelector("#result").innerHTML=result;//js原生写法
                $("#result").html(result);//Jquery中的封装简化写法
            }
        });
        //假如服务端响应到客户端的数据为json格式字符串,底层会默认将其转换为json对象
    }
</script>
</body>
</html>